:root{
  --z-font-white: #ffffff;
  --theme-color: #2080F0FF;
}
html:not(.dark) {
  --z-font-def: #808191;
  --z-font-anti: #11142D;
  --font-anti: #11142D;
  --z-bg-body-def: #F6F8FA;
  --z-bg-def: #F6F8FA;
  --z-bg-menu: #FFFFFF;
  --z-bg-card: #FFF;
  --z-bg-act: #FF754C;
  --z-bg-act-light: #FF754C;
  --z-bg-btn: #0088FA;
  --z-bg-select-def: #FFFFFF;
  --z-bg-select-def-hover: #F6F8FA;
  --z-bg-select-def-h5: #F6F8FA;
  --z-bg-content: #F6F8FA;
  --z-border-def: rgb(219, 222, 224);
  --z-border-tab-def: #0088FA;
  --bg-tab: #F0F3F6;
  --bg-tab-active: #0088FA;
  --r-border-def: #F0F3F6;
  --input-border-color: #AFB1BD;
  --input-background-color: #F6F8FA;
  --slider-bg: rgba(255, 117, 76, 0.1);
  --z-checkbox-border: #0088FA;
  --z-checkbox-color: #0088FA;
  --z-font-selector: #11142D;
  --z-wallet-btn-tab: #5824BB;
  --z-wallet-btn-tab-active: #F6F8FA;
  --font-hover: #FFFFFF;
  --font-winner: #808191;
  --font-winner3: #808191;
  --font-tab-prm: #0088FA;
  --font-navb: rgba(255, 255, 255, 0.6);
  --font-navb-act: #FFFFFF;
  --font-inv: #FA6401;
  --font-cancel: #0088FA;
  --font-date: #0088FA;
  --font-menu-act: #0088FA;
  --z-bg-menu: #FFFFFF;
  --bg-body: var(--z-bg-body-def);
  --bg-act: var(--z-bg-act);
  --bg-menu: var(--z-bg-menu);
  --bg-content: var(--z-bg-def);
  --bg-nav: var(--z-bg-def);
  --bg-card: var(--z-bg-card);
  --bg-left-opt: #F0F3F6;
  --bg-pbtn: var(--r-bg-btn-light);
  --bg-tab: #F0F3F6;
  --bg-tab-act: #11142D;
  --bg-tab-prm: #0088FA;
  --bg-tab-prm-h5: #11142D;
  --bg-slider: rgba(255, 117, 76, 0.1);
  --bg-nav-select: var(--z-bg-select-def);
  --bg-nav-select-hover: var(--z-bg-select-def-hover);
  --bg-lang-hover: #F6F8FA;
  --bg-theme-tab: #F6F8FA;
  --bg-table-hover: #FFFFFF;
  --bg-input: #F6F8FA;
  --bg-chat: #FFFFFF;
  --bg-chat-msg: #F6F8FA;
  --bg-chat-bottom: #F0F3F6;
  --bg-navb: linear-gradient(180deg, #5F9FFF 0%, #0088FA 100%);
  --bg-winner-h5: #FFFFFF;
  --bg-select-h5: #0088FA;
  --bg-table-header-h5: #F0F3F6;
  --bg-check-item-h5: rgba(0, 136, 250, 0.1);
  --bg-checked-item-h5: #FFFFFF;
  --bg-wallet-tab: #F0DDFF;
  --bg-wallet-tab-font: #AB35EE;
  --bg-wallet-tab-a: transparent;
  --bg-card-active: rgba(0, 136, 250, 0.1);
  --bg-search-input: rgba(0, 0, 0, 0.06);
  --bg-cancel: transparent;
  --bg-me-icon: #C6E3FC;
  --bg-dropdown: #FFFFFF;
  --bg-pagination: #F6F8FA;
  --border-color: var(--z-border-def);
  --border-line: var(--z-border-def);
  --border-wallet-tab: #F0DDFF;
  --border-input: #AFB1BD;
  --border-prm: #D2D5DD;
  --border-prm-h5: #808191;
  --border-tab: #0088FA;
  --border-org: #FF754C;
  --border-table-line: #D2D5DD;
  --border-act: #0088FA;
  --border-line: #ACAFBC;
  --border-table-check: #808191;
  --border-date: #0088FA;
  --wallet-money-bg: #E7EAEF;
  --wallet-money-text: #808191;

  @for $i from 1 through 10{
    --z-bg-body-def-#{$i}: rgba(36, 38, 43, #{calc($i / 10)});
  }
  color: var(--z-font-def);
  background-color: var(--z-bg-body-def);
}
html.dark{
  --z-font-def: #5b677E;
  --z-font-anti: #FFFFFF;
  --font-anti: #FFFFFF;
  --z-bg-body-def: #24262B;
  --z-bg-def: #0F131E;
  --z-bg-menu: #141a26;
  --z-bg-card: #171E2B;
  --z-bg-act: #F6621B;
  --z-bg-act-light: #FF754C;
  --z-bg-btn: #0078FF;
  --z-bg-select-def: #222A3A;
  --z-bg-select-def-hover: #171E2B;
  --z-bg-select-def-h5: #222A3A;
  --z-bg-content: #0F131E;
  --bg-tab: #141A26;
  --bg-tab-active: #222A3A;
  --z-border-def: #222A3A;
  --z-border-tab-def: #222A3A;
  --input-border-color: #0F131E;
  --input-background-color: #0F131E;
  --slider-bg: #222A3A;
  --z-checkbox-border: #222A3A;
  --z-checkbox-color: #ffffff;
  --z-font-selector: #FFFFFF;
  --z-wallet-btn-tab: #5824BB;
  --z-wallet-btn-tab-active: #0F131E;
  --font-def: var(--r-font-def);
  --font-anti: var(--r-font-anti);
  --font-hover: #FFFFFF;
  --font-winner: #D8EAFF;
  --font-winner3: #FFD9C4;
  --font-tab-prm: #5B677E;
  --font-navb: #5B677E;
  --font-navb-act: #0078FF;
  --font-inv: #FFED69;
  --font-cancel: #FFFFFF;
  --font-date: #FFFFFF;
  --font-menu-act: #FFFFFF;
  --z-bg-menu: #141a26;
  --bg-body: var(--z-bg-body-def);
  --bg-act: var(--z-bg-act);
  --bg-menu: var(--z-bg-menu);
  --bg-content: var(--z-bg-def);
  --bg-nav: var(--z-bg-def);
  --bg-card: var(--z-bg-card);
  --bg-left-opt: #171E2B;
  --bg-pbtn: var(--z-bg-btn);
  --bg-tab: #141A26;
  --bg-tab-act: #222A3A;
  --bg-tab-prm: #222A3A;
  --bg-tab-prm-h5: #222A3A;
  --bg-slider: rgba(255, 117, 76, 0.1);
  --bg-nav-select: var(--z-bg-select-def);
  --bg-nav-select-hover: var(--z-bg-select-def-hover);
  --bg-lang-hover: #222A3A;
  --bg-theme-tab: #171E2B;
  --bg-table-hover: #31343C;
  --bg-input: #0F131E;
  --bg-chat: #141A26;
  --bg-chat-msg: #222A3A;
  --bg-chat-bottom: #171E2B;
  --bg-navb: #171E2B;
  --bg-winner-h5: rgba(255, 255, 255, 0.1);
  --bg-select-h5: #222A3A;
  --bg-table-header-h5: #1A222F;
  --bg-check-item-h5: rgb(34, 42, 58);
  --bg-checked-item-h5: rgb(23, 30, 43);
  --bg-wallet-tab: #171E2B;
  --bg-wallet-tab-font: #FFFFFF;
  --bg-wallet-tab-a: #5824BB;
  --bg-card-active: #222A3A;
  --bg-search-input: #0F131E;
  --bg-cancel: #242F43;
  --bg-me-icon: #141A26;
  --bg-dropdown: #141A26;
  --bg-pagination: #0F131E;
  --border-color: var(--z-border-def);
  --border-wallet-tab: transparent;
  --border-input: transparent;
  --border-prm: transparent;
  --border-prm-h5: transparent;
  --border-tab: #222A3A;
  --border-org: transparent;
  --border-table-line: #222A3A;
  --border-act: transparent;
  --border-line: var(--z-border-def);
  --border-table-check: rgba(34, 42, 58, 1);
  --border-date: #F0F3F6;
  --wallet-money-bg: #222A3A;
  --wallet-money-text: #5B677E;

  color: var(--z-font-def);
  @for $i from 1 through 10{
    --z-bg-body-def-#{$i}: rgba(246, 248, 250, #{calc($i / 10)});
  }
  &.dark{
    background-color: var(--z-bg-def);
  }
}
